<template>
  <div class="my-tag">
     <input
    v-if="isShow"
    class="input"
    type="text"
    v-focus
    @blur="isShow=false"
    placeholder="输入标签" 
    />
    <div  
     @dblclick="showFn"
      class="text"
      v-else
      >
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        isShow: false,
      }
    },
    methods: {
      showFn(){
        this.isShow = true
      }
    },
  }
</script>

<style lang="less" scoped>
  .my-tag {
    cursor: pointer;
    .input {
      appearance: none;
      outline: none;
      border: 1px solid #ccc;
      width: 100px;
      height: 40px;
      box-sizing: border-box;
      padding: 10px;
      color: #666;
      &::placeholder {
        color: #666;
      }
    }
  }
</style>